<!--
 * @Description: 教师情况登记表
 * @Autor: dyx
 * @Date: 2023-05-30 14:36:16
 * @LastEditTime: 2023-06-01 14:44:56
-->
<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" content="教师情况登记表">
        </el-page-header>
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <el-row :gutter="15" class="main">
        <div class="TISchedule">
          <div style="padding-right: 7px;">
            <el-button type="primary" style="float:right" @click="exportWord"
              >导出Word</el-button
            >
          </div>
          <div class="mytable">
            <div class="table_title">教师情况登记表</div>
            <table>
              <tr>
                <td width="10%">
                  姓名
                </td>
                <td width="15%">
                  <input
                    type="text"
                    v-model="dataForm.xm"
                    style="width:100%"
                  />
                </td>
                <td width="8%">
                  性别
                </td>
                <td width="8%">
                  <input
                    type="text"
                    v-model="dataForm.xb"
                    style="width:100% "
                  />
                </td>
                <td width="15%">
                  出生年月
                </td>
                <td width="22%">
                  <el-date-picker
                    v-model="dataForm.csny"
                    type="date"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    style="width:100% "
                  >
                  </el-date-picker>
                </td>
                <td rowspan="4">
                  1 寸 照片
                </td>
              </tr>

              <tr>
                <td>
                  政治面貌 
                </td>
                <td>
                  <input
                    type="text"
                    v-model="dataForm.zzmm"
                    style="width:100% "
                  />
                </td>
                <td colspan="2">
                  身份证号码
                </td>

                <td colspan="2">
                  <input
                    type="text"
                    v-model="dataForm.sfzh"
                    style="width:100% "
                  />
                </td>
              </tr>

              <tr>
                <td>
                  文化程度
                </td>
                <td colspan="5">
                  <div class="col_">
                    <span>
                      <input
                        type="text"
                        v-model="dataForm.whcd"
                        style="width:100% "
                    /></span>
                    <span>所学专业</span>
                    <span style="text-align:center;">
                      <input
                        type="text"
                        v-model="dataForm.sxzy"
                        style="width:100% "
                      />
                    </span>
                    <span>工作时间</span>
                    <span>
                      <el-date-picker
                        v-model="dataForm.gzsj"
                        type="date"
                        value-format="yyyy-MM-dd"
                        size="mini"
                        style="width:100% "
                      >
                      </el-date-picker>
                    </span>
                  </div>
                </td>
              </tr>

              <tr>
                <td>
                  技术职称
                </td>
                <td colspan="5">
                  <div class="col_">
                    <span>
                      <input
                        type="text"
                        v-model="dataForm.jszc"
                        style="width:100% "
                    /></span>
                    <span>行政职务</span>
                    <span>
                      <input
                        type="text"
                        v-model="dataForm.xzzw"
                        style="width:100% "
                      />
                    </span>
                    <span>技能等级</span>
                    <span
                      ><input
                        type="text"
                        v-model="dataForm.jndj"
                        style="width:100% "
                      />
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  任教科目
                </td>
                <td colspan="2">
                  <input
                    type="text"
                    v-model="dataForm.rjkm"
                    style="width:100% "
                  />
                </td>
                <td colspan="3">从事安全生产培训工作时间</td>
                <td>
                  <el-date-picker
                    v-model="dataForm.cssj"
                    type="date"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    style="width:100%;"
                  >
                  </el-date-picker>
                </td>
              </tr>
              <tr>
                <td>
                  工作单位
                </td>
                <td colspan="4">
                  <input
                    type="text"
                    v-model="dataForm.gzdw"
                    style="width:100% "
                  />
                </td>
                <td>专职/兼职</td>
                <td>
                  <input
                    type="text"
                    v-model="dataForm.zz"
                    style="width:100% "
                  />
                </td>
              </tr>
              <tr>
                <td>
                  详细地址
                </td>
                <td colspan="4">
                  <input
                    type="text"
                    v-model="dataForm.xxdz"
                    style="width:100% "
                  />
                </td>
                <td>固定电话</td>
                <td>
                  <input
                    type="text"
                    v-model="dataForm.gddh"
                    style="width:100% "
                  />
                </td>
              </tr>
              <tr>
                <td width="100px">
                  移动电话
                </td>
                <td colspan="2">
                  <input
                    type="text"
                    v-model="dataForm.yddh"
                    style="width:100% "
                  />
                </td>
                <td>邮箱</td>
                <td colspan="3">
                  <input
                    type="text"
                    v-model="dataForm.yx"
                    style="width:100% "
                  />
                </td>
              </tr>

              <tr height="345px">
                <td>
                  个人简历
                </td>
                <td colspan="6">
                  <textarea
                    v-model="dataForm.grjl"
                    rows="20"
                    style="width:100%;"
                  ></textarea>
                </td>
              </tr>
              <tr height="345px">
                <td>
                  主要教学科研成果
                </td>
                <td colspan="6">
                  <textarea
                    v-model="dataForm.zyjx"
                    rows="20"
                    style="width:100%;"
                  ></textarea>
                </td>
              </tr>
              <tr>
                <td>
                  备注
                </td>
                <td colspan="6" style="text-align:left">
                  身份证复印件， 师资岗位合格证，学历证明， 技术职称证明，
                  相关业务培训证明复印件 等附后。
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-row>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import Textarea from "@/components/Generator/index/RightComponents/Textarea.vue";
export default {
  components: { Textarea },
  name: "TISchedule",
  data() {
    return {
      loading: true,
      dataForm: {},
      list: [],
      radio: 3
    };
  },
  created() {},
  methods: {
    init(id) {
      this.loading = true;
      request({
        url: "/api/class_archives/generateA10/" + id,
        method: "get"
      }).then(res => {
        this.dataForm = res.data;
        console.log(this.dataForm);
        this.loading = false;
      });
    },
    exportWord() {
      this.dataForm.childrenVOList = this.list;
      for (let key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          if (key == "childrenVOList") {
            this.dataForm[key].forEach(item => {
              for (let key2 in item) {
                if (item[key2] == null) {
                  item[key2] = "";
                }
              }
            });
          } else {
            this.dataForm[key] = this.dataForm[key].join(",");
          }
        } else if (this.dataForm[key] == null) {
          this.dataForm[key] = "";
        }
      }
      request({
        responseType: "blob",
        url: "/api/class_archives/generateA10Export",
        method: "post",
        data: this.dataForm
      }).then(res => {
        console.log(res, 123);
        var debug = res;
        if (debug) {
          var a = document.createElement("a");
          a.download = "教师情况登记表.docx";
          a.style.display = "none";
          var blob = new Blob([debug], { type: "application/x-msdownload" });
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
    goBack() {
      this.$emit("refresh");
    }
  }
};
</script>
<style scoped lang="scss">
// 引入公共样式
@import "../xy_da_classArchives/components/TABLESTYLE.scss";

table {
  td {
    padding: 0 !important;
  }
}
// textarea {
//   border: 1px solid #ccc !important;
// }
.col_ {
  width: 100%;
  height: 100%;

  // height: 45px;

  span {
    display: inline-block;
    height: 40px;
    border-right: 1px solid #000;
    vertical-align: top;
    text-align: center;
    line-height: 40px;
    &:nth-of-type(1) {
      text-align: center;
      width: 18%;
    }
    &:nth-of-type(2) {
      width: 16%;
    }
    &:nth-of-type(3) {
      text-align: center;
      width: 25%;
    }
    &:nth-of-type(4) {
      width: 16%;
    }
    &:nth-of-type(5) {
      text-align: center;
      border: none;
      width: 25%;
    }
  }
}
::v-deep .el-date-editor {
  border: none;
  padding: 0;
  .el-range-input {
    text-align: left;
    width: 100px;
    color: #000;
  }
  .el-range-separator {
    line-height: 30px;
  }
}
::v-deep .el-input__inner {
  padding: 0 !important;
  border: none !important;
}
::v-deep .el-icon-date {
  display: none;
}
</style>
